<template>
    <form action="" v-show="showFlog">
    <span @click="ChangeShow">注册</span>
    <div><img src="../assets/icons/logo/logo_icon.png" alt=""></div>
    <label>账号:<input 
        type="text" 
        v-model="LoginAccount"
        @blur="AccountCheck"></label>
    <label class="iot_password">密码:<input 
        :type="eye[0]" 
        v-model="LoginPassword"
        @blur="PasswordCheck"><img :src="eyeImg[0]" alt=""  @click="SeePassword(0)"></label>
    <div><van-button type="success" @click="AccountCheck(),PasswordCheck(),Login()">登录</van-button></div>
  </form>
</template>

<script>
import { inject, reactive, ref } from 'vue';
export default {
    props:['log',
    'eye',
    'eyeImg',
    'SeePassword',
    'ChangeShow'],
    setup(props){
        const LoginFlog = reactive(['',''])
        let  Goods = inject('Goods')
        let RegisterImformation = inject('RegisterImformation')
        //播报信息
        let LoginIndex = inject('LoginIndex')
        function Login(){
            for(let i = 0; i < 2; i++){
                if(LoginFlog[i] == 'false'){
                    if(i == 0){
                        props.log('账号不存在，请重新输入','#f56c6c')
                    }else{
                        props.log('账号或密码错误，请重新输入','#f56c6c')
                    }
                break
                }else if(LoginFlog[i] == ''){
                    if( i == 0){
                        props.log('账号不能为空','#f56c6c')
                    }else{
                        props.log('密码不能为空','#f56c6c')
                    }
                break
                }else{
                    if(i == 1){
                        props.log('登录成功','#27ba9b')
                        LoginIndex.value = Index.value
                        Goods[15] = RegisterImformation[LoginIndex.value]
                        Goods[14] = Goods[15].cart
                    }
                }
            }
        }
        //登录验证
        let LoginAccount = ref('')
        let LoginPassword = ref('')
        let Index = ref(null)
        //验证是否存在账号
        function AccountCheck(){
            if(LoginAccount.value == ''){
                LoginFlog[0] = ''
            }else if(AccountChecked()){
                LoginFlog[0] = 'true'
            }else{
                LoginFlog[0] = 'false'
            }
        }
        function AccountChecked(){
            for(let i = 0 ; i < RegisterImformation.length; i++){
                if(LoginAccount.value == RegisterImformation[i].account){
                    Index.value = i
                    return true
                }else{
                    if(i == RegisterImformation.length-1){
                        return false
                    }
                }
            }
        }
        //验证密码
        function PasswordCheck(){
            if(LoginPassword.value == ''){
                LoginFlog[1] = ''
            }else if(LoginFlog[0] == 'true'){
                if(RegisterImformation[Index.value].password == LoginPassword.value){
                    LoginFlog[1] = 'true'
                }else{
                    LoginFlog[1] = 'false'
                }
            }
        }
        return {Login,AccountCheck,PasswordCheck,LoginAccount,LoginPassword}
        }
}
</script>

<style scoped>
form{
    display: flex;
    flex-direction: column;
    align-items: end;
}
span{
    position: absolute;
    top: 20px;
    right: 20px;
    cursor: pointer;
    color: #c7c7c7;
}
form div{
    width: 100%;
    text-align: center;
}
img{
    width: 60px;
    margin: 0 0 20px;
}
input{
    border:0px;
    border-bottom: 1px solid #bdbdbd;
    margin: 0 0 20px 10px;
    outline: none;
}
button{
    width: 100px;
    background-color: #28ba9b;
}
.iot_password{
    position: relative;
}
.iot_password img{
    position:absolute;
    width: 26.8px;
    height: 26.8px;
    right: 0px;
    margin: 0;
}
</style>